<template>
<div class="box">
  <KeyFramesToCanvas 
  :resourceList="images" 
  ref="canvas" 
  :options="option"
  @action="action"
  ></KeyFramesToCanvas>
</div>
</template>
<script lang="ts">
// import img1 from "@/assets/img/(1).png"
// import img2 from "@/assets/img/(2).png"
import img1 from "@images/img/(1).png"
import img2 from "@images/img/(2).png"
import img3 from "@images/img/(3).png"
import img4 from "@images/img/(4).png"
import img5 from "@images/img/(5).png"
import img6 from "@images/img/(6).png"
import img7 from "@images/img/(7).png"
export default {
  data() {
    return {
      images: [
        {
          sourceName: "woman-1",
          src: img1
        },
        {
          sourceName: "woman-2",
          src: img2
        },
        {
          sourceName: "woman-3",
          src: img3
        },
        {
          sourceName: "woman-4",
          src: img4
        },
        {
          sourceName: "woman-5",
          src: img5
        },
        {
          sourceName: "woman-6",
          src: img6
        },
        {
          sourceName: "woman-7",
          src: img7
        },
      ],
      option:{
        width: 80 * 2,
        height: 102 * 2,
        unit: 'px'
      }
    }
  },
  mounted() {
    this.$refs.canvas.start()
    console.log('启动1')
  },
  methods: {
    action(i){
      console.log(i)
    }
  },
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.box{
  width: 100vw;
  height: 100vh;
}
</style>
